<template>
  <div class="main-container">
	  <div class="title">实时数据</div>
	  <div class="dashboard-grid">
		  <div class="item color1">
			  <span class="num">{{data.reg_user_total}}</span>
			  <span class="label">总注册用户</span>
		  </div>
		  <div class="item color2">
			  <span class="num">{{data.archive_total}}</span>
			  <span class="label">建档用户数</span>
		  </div>
		  <div class="item color3">
			  <span class="num">{{data.reg_user_today_total}}</span>
			  <span class="label">今日新增注册</span>
		  </div>
		  <div class="item color4">
			  <span class="num">{{data.archive_today_total}}</span>
			  <span class="label">今日建档数</span>
		  </div>
		  <div class="item color5">
			  <span class="num">{{data.post_today_total}}</span>
			  <span class="label">今日动态数量</span>
		  </div>
	  </div>
  </div>
</template>
<script>
import { indexTotalApi } from '@/api/index';
export default {
  data() {
    return {
      grid: {
        xl: 3,
        lg: 6,
        md: 6,
        sm: 8,
        xs: 8,
      },
	  data:{
		  reg_user_total:0,
		  archive_total:0,
		  reg_user_today_total:0,
		  archive_today_total:0,
		  post_today_total:0
	  }
    };
  },
  methods: {
    getData() {
      indexTotalApi()
        .then(async (res) => {
          let data = res.data;
  		  this.data = data;
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="less" scoped>
.main-container{
	display: flex;
	flex-direction: column;
	padding: 0px 0px 30px 0px;
	.title{
		font-size: 18px;
		font-weight: bold;
		color: black;
		margin-top: 20px;
	}
	.dashboard-grid{
		margin-top: 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		.item{
			display: flex;
			flex-direction: column;
			padding: 40px 55px;
			justify-content: center;
			align-items: center;
			border-radius: 10px;
			
			.num{
				font-size: 15px;
				font-weight: bold;
				color: white;
			}
			.label{
				font-size: 18px;
				font-weight: bold;
				color: white;
				margin-top: 5px;
			}
		}
		.color1{
			background-color: #6ac0c6;
		}
		.color2{
			background-color: #f1c86e;
		}
		.color3{
			background-color: #959dee;
		}
		.color4{
			background-color: #cc90d8;
		}
		.color5{
			background-color: #f1aa7d;
		}
	}
}

</style>
